<template>
  <div class="wrapper">
    <el-row>
      <el-col :span="12"
        ><div class="grid-content bg-purple t-l">
          <i
            :class="[
              $store.state.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold',
              'asideBtn',
            ]"
            @click="collaspeMenu"
          ></i>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple vAlign">
          <el-avatar
            size="small"
            class="userImg"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
          <div class="username">Admin</div>
          <el-button type="text" @click="loginout">退出</el-button>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    collaspeMenu() {
      this.$store.commit("changeCollapse", !this.$store.state.isCollapse);
    },
    loginout() {
         this.$router.push("/login");
         localStorage.clear();
         sessionStorage.clear();
    }
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  .t-l {
    text-align: left;
  }
  .vAlign {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .asideBtn{
      cursor: pointer;
  }
  .username {
    margin: 0 10px;
  }
 
}
</style>